<script setup lang="ts">
import type { AssigneeNode } from '../nodes/type'
import type { Field } from '@/components/f_flow/render/type'
import { NForm, NFormItem, NRadio, NRadioGroup, NSpace,NSelect} from 'naive-ui'
defineProps<{
  activeData: AssigneeNode
  fields: Field[]
  type: '审批' | '抄送' | '办理'
}>()

</script>

<template>
  <n-form
    ref="formRef"
    :model="activeData"
    label-width="auto"
    size="medium"
  >
    <n-form-item :label="`${type}对象`" path="assigneeType">
      <n-radio-group v-model:value="activeData.assigneeType" name="assigneeType">
        <n-space>
          <n-radio value="user">指定人员</n-radio>
          <n-radio value="role">指定角色</n-radio>
          <n-radio value="choice">发起人自选</n-radio>
          <n-radio value="self">发起人自己</n-radio>
          <n-radio value="leader">直属上级</n-radio>
          <n-radio value="orgLeader">组织主管</n-radio>
          <n-radio value="formUserSelect">表单内人员</n-radio>
          <n-radio value="formRoleSelect">表单内角色</n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <n-form-item label="指定人员" path="users" v-if="activeData.assigneeType === 'user'">
      <user-selector v-model="activeData.users" multiple :placeholder="`请选择${type}人`" />
    </n-form-item>
    <n-form-item label="发起人自选择" path="choice" v-if="activeData.assigneeType === 'choice'">
      <n-radio-group v-model:value="activeData.choice" name="choice">
        <n-space>
          <n-radio :value="true">多选</n-radio>
          <n-radio :value="false">单选</n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <n-form-item label="多级上级" path="choice" v-if="activeData.assigneeType === 'leader'">
      <n-radio-group v-model:value="activeData.leader" name="leader">
        <n-space>
          <n-radio :value="1">直属上级</n-radio>
          <n-radio :value="2">2级上级</n-radio>
          <n-radio :value="3">3级上级</n-radio>
          <n-radio :value="4">4级上级</n-radio>
          <n-radio :value="5">5级上级</n-radio>
          <n-radio :value="6">6级上级</n-radio>
          <n-radio :value="7">7级上级</n-radio>
          <n-radio :value="8">8级上级</n-radio>
          <n-radio :value="9">9级上级</n-radio>
          <n-radio :value="10">10级上级</n-radio>
          <n-radio :value="11">11级上级</n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <n-form-item label="组织主管" path="orgLeader" v-if="activeData.assigneeType === 'orgLeader'">
      <n-radio-group v-model:value="activeData.orgLeader" name="orgLeader">
        <n-space>
          <n-radio :value="1">直属主管</n-radio>
          <n-radio :value="2">2级主管</n-radio>
          <n-radio :value="3">3级主管</n-radio>
          <n-radio :value="4">4级主管</n-radio>
          <n-radio :value="5">5级主管</n-radio>
          <n-radio :value="6">6级主管</n-radio>
          <n-radio :value="7">7级主管</n-radio>
          <n-radio :value="8">8级主管</n-radio>
          <n-radio :value="9">9级主管</n-radio>
          <n-radio :value="10">10级主管</n-radio>
          <n-radio :value="11">11级主管</n-radio>
        </n-space>
      </n-radio-group>
    </n-form-item>
    <n-form-item label="指定角色" path="roles" v-if="activeData.assigneeType === 'role'">
      <RoleSelector
        v-model="activeData.roles"
        style="width: 220px"
        collapse-tags
        :max-collapse-tags="1"
        multiple
        clearable
        placeholder="请选择角色"
      />
    </n-form-item>

    <n-form-item label="表单内人员" path="formUserSelect" v-if="activeData.assigneeType === 'formUserSelect'">
      <n-select
        v-model:value="activeData.formUserSelect"
        placeholder="选择表单项"
        :options="
          fields
            .filter((e) => 1 === 1)
            .map((e) => {
              return {
                label: e.label,
                value: e.id
              }
            })
          "
      />
    </n-form-item>
    <n-form-item label="表单内角色" path="formRoleSelect" v-if="activeData.assigneeType === 'formRoleSelect'">
      <n-select
        v-model:value="activeData.formRoleSelect"
        placeholder="选择表单项"
        :options="
          fields
            .filter((e) => 1 === 1)
            .map((e) => {
              return {
                label: e.label,
                value: e.id
              }
            })
          "
      />
    </n-form-item>
  </n-form>
</template>

<style scoped lang="scss"></style>
